<template>
 <div>
   <TitleBar>
     <p>练习</p>
   </TitleBar>
      <el-card style="margin-top:10px">
         <el-tabs :tab-position="tabPosition" style="height: 700px;">
          <el-tab-pane v-for="(item,index) in contentList" :key="index" class="">
             <span slot="label" style="font-size:17px">{{index+1}}. {{item.title}}</span>

            <el-row class="content">
              <h3 ref="title" @click="theTitle(index)">{{index+1}}.{{item.title}}</h3>
              <p style="line-height:40px;font-size:20px" v-html="item.answer"></p>
            </el-row>

            <el-row :gutter="20">

              <!-- <el-col :span="3" style="margin-left:70%"><el-button type="success" @click="yesBtn">已掌握</el-button></el-col> -->
              <el-col :span="2" style="margin-left:85%;margin-top:10px"><el-button type="info" @click="$router.back()">返回</el-button></el-col>

            </el-row>

          </el-tab-pane>
        </el-tabs>
      </el-card>
 </div>
</template>

<script>
import TitleBar from './titleBar.vue'
export default {
  name: 'pageList',
  data () {
    return {
      pageList: [],
      contentList: [],
      tabPosition: 'right',
      noList: [],
      yesList: []
    }
  },
  components: {
    TitleBar
  },
  created () {
    this.pageList = this.$route.params.list
    // console.log(this.$route.params)
    // console.log(this.pageList)
    this.pageList.map(item => {
      return item.children.forEach(item => {
        return this.contentList.push(item)
      })
    })
    console.log(this.contentList)
  },
  mounted () {},
  methods: {

  },
  computed: {},
  watch: {}
}
</script>

<style scoped lang="less">
    .content{
      height: 600px;
      background-color: rgb(241, 250, 250);
    }
    // ::v-deep .el-tab-pane{
    //   position: relative;
    //   .el-row{
    //   position: absolute;
    //   }
    // }
</style>
